<!DOCTYPE html>
<html lang="zh">
<head>
    {include file="Public/header"}
    <link rel="stylesheet" href="__STATIC__/layout/css/gyq.css">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
</head>
<body style="color:#333;padding:3px;" class="x_sorll">
<div class="ibox" style="padding: 10px">
    <div class="ibox-content">
        <form action="">
        <table class="table">
            <tr>
                <td class="text-right" style="width:20%;">主题<font color="red">(*)</font>:</td>
                <td><input type="text" name="title" class="form-control"></td>
            </tr>
            <tr>
                <td class="text-right">内容<font color="red">(*)</font>:</td>
                <td><textarea name="content" id="" cols="30" rows="7" class="form-control"></textarea></td>
            </tr>
            <tr>
                <td class="text-right">提醒人员<font color="red">(*)</font>:</td>
                <td>
                    <div style="float:left;">
                        <div class="input-group" id="">
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="txry" >
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <a href="javascript:;" style="float:left;" class="btn btn-default" id="select_txry">选择</a>
                    <a href="javascript:;" style="float:left;" class="btn btn-success" id="txzj">提醒自己</a>
                </td>
            </tr>
            <tr>
                <td class="text-right"></td>
                <td>
                    <div class="duoxuan" id="selected_net">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-right">提醒日期<font color="red">(*)</font>:</td>
                <td>
                    <input type="text" name="txrq" value="{:date('Y-m-d H:i:s')}" class="form-control layer-date" onclick="laydate({
        format: 'YYYY-MM-DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
//            end.min = datas; //开始日选好后，重置结束日的最小日期
//            end.start = datas //将结束日的初始值设定为开始日
        }
    })">
                </td>
            </tr>
            <tr>
                <td class="text-right">提醒方式<font color="red">(*)</font>:</td>
                <td>
                    <label for="yj"><input id="yj" type="radio" name="txfs" value="0">邮件</label>&nbsp;&nbsp;
                    <label for="tc"><input id="tc" type="radio" name="txfs" value="1">弹窗</label>
                </td>
            </tr>
        </table>
        </form>
    </div>
</div>
</body>
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script>
    //提醒自己
    $('#txzj').on('click',function () {
        var bool = false
        $('#selected_net .ren').each(function (idx,o) {
            if($(this).find('input').val() == '{$employee_id}'){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_net').append('<span class="ren"><input type="hidden" name="txry[]" value="{$employee_id}">{$em_name}<span class="close">×</span></span>')
        }
        return false
    })
    //弹出选择人员
    $('#select_txry').on('click',function () {
        top.layer.open({
            type:2,
            area:['60%','60%'],
            maxmin:true,
            content:'{:url("open/employee")}',
            btn:['确定','取消'],
            yes:function (i,o) {
                var a = $(o).find('iframe').contents()
                var data = a.find('#data')
                data = data.val()
                data = JSON.parse(data)
                var bool = false
                for(var j=0;j<data.length;j++){
                    $('#selected_net .ren').each(function (idx, o) {
                        if ($(this).find('input').val() == data[j].id) {
                            bool = true;
                        }
                    })
                    if (bool == false)
                        $('#selected_net').append('<span class="ren"><input type="hidden" name="txry[]" value="'+data[j].id+'">' + data[j].title + '<input type="hidden" name="area_id[]" value="' + data[j].id + '"><span class="close">×</span></span>')
                }

                top.layer.close(i)
            }
        })
        return  false
    })
    //关闭多选某一项
    $('body').on('click','.duoxuan .close',function () {
        $(this).closest('.ren').remove()
    })
    //产品网点搜索自动补全
    $("#txry").bsSuggest({
        url: "{:url('bs/employee')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_net .ren').each(function (idx,o) {
            if($(this).find('input').val() == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_net').append('<span class="ren"><input type="hidden" name="txry[]" value="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
    $('.emptyIf').on('click',function () {
        $(this).closest('form').find('input[type=text]').val('')
        $(this).closest('form').find('select').val('')
        $(this).closest('form').submit()

    })

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY-MM-DD 00:00:00',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY-MM-DD 23:59:60',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>
</html>